<template>
  <header-tool />
  <el-card v-for="(item, index) in blogCardList" :key="index" class="card-box blog-card">
    <!-- 标题部分 -->
    <el-row style="margin-bottom: 10px">
      <el-col :span="24">
        <router-link
          :to="{ name: 'blogViewShow', params: { blogId: item.blogId } }"
          class="router-link"
        >
          <el-text style="font-size: 18px; font-weight: bold">
            {{ item.blogTitle }}
          </el-text>
        </router-link>
      </el-col>
    </el-row>
    <!-- 内容部分 -->
    <el-row style="margin-bottom: 10px">
      <el-col :span="24">
        <el-text line-clamp="3">
          {{ item.blogContent }}
        </el-text>
      </el-col>
    </el-row>
    <!-- 底部部分 -->
    <el-row>
      <!-- 头像 -->
      <el-col :span="4">
        <el-avatar shape="square" size="small" :src="item.avatar" style="margin-right: 5px" />
        <el-text>{{ item.author }}</el-text>
      </el-col>
      <!-- 创建时间 -->
      <el-col :span="5">
        <el-text>创建于{{ item.createTime }}</el-text>
      </el-col>
      <!-- 浏览量 -->
      <el-col :span="3">
        <el-text>浏览量：{{ item.blogViews }}</el-text>
      </el-col>
      <!-- 点赞数 -->
      <el-col :span="3">
        <el-text>点赞数：{{ item.likes }}</el-text>
      </el-col>
      <!-- 分类 -->
      <el-col :span="9">
        <router-link
          :to="{
            name: 'blogListShow',
            params: { categoryId: item.blogCategoryId }
          }"
        >
          <el-tag type="primary" effect="light" round>
            {{ item.blogCategoryName }}
          </el-tag>
        </router-link>
      </el-col>
    </el-row>
  </el-card>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { pageBlogCards } from '@/api/blog';
import { BlogInfo } from '@/api/blog/types';
import HeaderTool from './header-tool/index.vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

// 初始化
onMounted(() => {
  search();
});

const loading = ref(false);
const listQuery = ref({
  pageNum: 1,
  pageSize: 20
});
const total = ref(0);
// 文章卡片列表
const blogCardList = ref([] as BlogInfo[]);
const search = () => {
  loading.value = true;
  pageBlogCards({ ...listQuery.value }).then(response => {
    blogCardList.value = response.data.list;
    total.value = response.data.total;
    loading.value = false;
  });
};
</script>
